<template>
  <div class="task-record-container">
    <!-- 页面标题 -->
    <h2 class="page-title">
      任务完成记录
    </h2>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form
        :inline="true"
        class="search-form"
      >
        <el-form-item label="任务ID">
          <el-input
            v-model="searchQuery.taskId"
            placeholder="请输入任务ID"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="账号ID">
          <el-input
            v-model="searchQuery.username"
            placeholder="请输入账号ID"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="任务类型">
          <el-select
            v-model="searchQuery.taskType"
            placeholder="请选择任务类型"
            clearable
            style="width: 200px"
          >
            <el-option
              label="全部"
              value=""
            />
            <el-option
              label="签到"
              value="签到"
            />
            <el-option
              label="发帖"
              value="发帖"
            />
            <el-option
              label="评论"
              value="评论"
            />
            <el-option
              label="点赞"
              value="点赞"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="完成时间">
          <el-date-picker
            v-model="searchQuery.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 360px"
          />
        </el-form-item> -->

        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button @click="resetSearch">
            重置
          </el-button>
          <el-button
            type="danger"
            :disabled="selectedIds.length === 0"
            @click="batchDelete"
          >
            批量删除({{ selectedIds.length }})
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="currentPageData"
      border
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 'bold'
      }"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选列 -->
      <!-- 1.多选框列 -->
      <!-- 2.固定宽度 -->
      <!-- 3.居中对齐 -->
      <el-table-column
        type="selection"
        width="80"
        align="center"
      />

      <!-- ID列 -->
      <!-- 1.绑定roleName字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <el-table-column
        prop="id"
        label="记录ID"
        width="120"
        align="center"
      />

      <!-- 角色名称列 -->
      <!-- 1.绑定roleName字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <!-- 用户列 - 修正后的代码 -->
      <el-table-column
        label="用户"
        width="200"
        align="center"
      >
        <template #default="{row}">
          <div class="user-cell">
            <el-avatar
              :size="32"
              :src="row.avatar || defaultAvatar"
            />
            <span style="margin-left: 10px">{{ row.username }}</span>
          </div>
        </template>
      </el-table-column>

      <!-- 备注列 -->
      <!-- 1.绑定remark字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <el-table-column
        prop="userId"
        label="账号ID"
        align="center"
      />

      <el-table-column
        prop="taskId"
        label="任务ID"
        align="center"
      />

      <el-table-column
        prop="taskType"
        label="任务类型"
        align="center"
      />

      <!-- 创建时间列 -->
      <!-- 1.绑定createTime字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <!-- 4.固定宽度 -->
      <el-table-column
        prop="completeTime"
        label="完成时间"
        align="center"
        width="280"
      />

      <!-- 操作列 -->
      <!-- 1.列标题 -->
      <!-- 2.居中对齐 -->
      <!-- 3.固定宽度 -->
      <el-table-column
        label="操作"
        align="center"
        width="280"
      >
        <!-- 自定义列模板 -->
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <!-- 1.小尺寸按钮 -->
          <!-- 2.点击事件，传入当前行数据 -->
          <!-- <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button> -->

          <!-- 删除按钮 -->
          <!-- 1.小尺寸按钮 -->
          <!-- 2.红色警示按钮 -->
          <!-- 3.点击事件，传入当前行id -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域（左下角） -->
    <div class="pagination-area-left">
      <span>共 {{ totalItems }} 条</span>
      <el-select
        v-model="pagination.pageSize"
        size="mini"
        style="width: 100px; margin: 0 15px"
        @change="handleSizeChange"
      >
        <el-option
          v-for="item in [10, 20, 50]"
          :key="item"
          :label="`${item}条/页`"
          :value="item"
        />
      </el-select>
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next, jumper"
        :total="totalItems"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TaskRecord',
  data () {
    return {
      searchQuery: {
        taskId: '',
        username: '',
        taskType: '',
        timeRange: []
      },
      selectedIds: [],
      recordList: [
        {
          id: 1,
          username: '用户1',
          userId: '1001',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          taskId: 1,
          taskType: '签到',
          completeTime: '2023-06-01 10:30:22'
        },
        {
          id: 2,
          username: '用户1',
          userId: '1001',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          taskId: 2,
          taskType: '发帖',
          completeTime: '2023-06-02 14:15:45'
        },
        {
          id: 3,
          username: '用户2',
          userId: '1002',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          taskId: 3,
          taskType: '评论',
          completeTime: '2023-06-03 09:20:33'
        },
        {
          id: 4,
          username: '用户3',
          userId: '1003',
          avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
          taskId: 4,
          taskType: '点赞',
          completeTime: '2023-06-04 16:45:18'
        },
        {
          id: 5,
          username: '用户1',
          userId: '1001',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          taskId: 5,
          taskType: '签到',
          completeTime: '2023-06-01 10:30:22'
        },
        {
          id: 6,
          username: '用户1',
          userId: '1001',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          taskId: 6,
          taskType: '发帖',
          completeTime: '2023-06-02 14:15:45'
        },
        {
          id: 7,
          username: '用户2',
          userId: '1002',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          taskId: 7,
          taskType: '评论',
          completeTime: '2023-06-03 09:20:33'
        },
        {
          id: 8,
          username: '用户3',
          userId: '1003',
          avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
          taskId: 8,
          taskType: '点赞',
          completeTime: '2023-06-04 16:45:18'
        },
        {
          id: 9,
          username: '用户3',
          userId: '1003',
          avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
          taskId: 9,
          taskType: '点赞',
          completeTime: '2023-06-04 16:45:18'
        }
      ],
      filteredRecordList: [],
      isSearched: false,
      pagination: {
        currentPage: 1,
        pageSize: 8
      },
      defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  computed: {
    currentPageData () {
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      return this.isSearched
        ? this.filteredRecordList.slice(start, end)
        : this.recordList.slice(start, end)
    },
    totalItems () {
      return this.isSearched
        ? this.filteredRecordList.length
        : this.recordList.length
    }
  },
  methods: {
    getTagType (type) {
      const types = {
        签到: 'success',
        发帖: 'warning',
        评论: 'info',
        点赞: 'danger'
      }
      return types[type] || ''
    },
    handleSearch () {
      this.isSearched = true
      this.pagination.currentPage = 1

      this.filteredRecordList = this.recordList.filter(record => {
        // 任务ID查询 (精确匹配)
        const taskIdMatch = this.searchQuery.taskId === '' ||
          record.taskId.toString() === this.searchQuery.taskId

        // 账号ID查询 (精确匹配)
        const userIdMatch = this.searchQuery.username === '' ||
          record.userId.toString() === this.searchQuery.username

        // 任务类型查询 (精确匹配)
        const typeMatch = this.searchQuery.taskType === '' ||
          record.taskType === this.searchQuery.taskType

        // 完成时间范围查询
        // let timeMatch = true
        // if (this.searchQuery.timeRange && this.searchQuery.timeRange.length === 2) {
        //   const startDate = new Date(this.searchQuery.timeRange[0])
        //   const endDate = new Date(this.searchQuery.timeRange[1])
        //   const recordDate = new Date(record.completeTime)

        //   // 设置时间为当天结束时间(23:59:59)
        //   endDate.setHours(23, 59, 59, 999)

        //   timeMatch = recordDate >= startDate && recordDate <= endDate
        // }

        return taskIdMatch && userIdMatch && typeMatch
      })
    },
    resetSearch () {
      this.isSearched = false
      this.searchQuery = {
        taskId: '',
        username: '',
        taskType: '',
        timeRange: []
      }
      this.pagination.currentPage = 1
      this.filteredRecordList = []
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    handleSelectionChange (selection) {
      this.selectedIds = selection.map(item => item.id)
    },
    batchDelete () {
      if (this.selectedIds.length === 0) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      this.$confirm('确定删除选中的记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.recordList = this.recordList.filter(record => !this.selectedIds.includes(record.id))
        this.selectedIds = []
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleDelete (id) {
      this.$confirm('确定删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.recordList = this.recordList.filter(record => record.id !== id)
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
.task-record-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.search-area {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-form .el-form-item {
  margin-bottom: 10px;
  margin-right: 15px;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
}

.el-table {
  width: 100%;
}

.el-table::before {
  height: 0;
}

.el-table--border::after,
.el-table--group::after {
  width: 0;
}

.el-table td,
.el-table th {
  padding: 12px 0;
  white-space: nowrap;
}

.user-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 左下角分页样式 */
.pagination-area-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pagination-area-left .el-pagination {
  margin-left: 15px;
}

.el-tag {
  font-size: 12px;
  padding: 0 10px;
  height: 28px;
  line-height: 26px;
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }

  .search-form .el-form-item .el-input,
  .search-form .el-form-item .el-select,
  .search-form .el-form-item .el-date-editor {
    width: 100% !important;
  }

  .pagination-area-left {
    flex-direction: column;
    align-items: flex-start;
  }
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #f5f7fa !important;
}
</style>
